<template>
  <div class="mx-pane">
    <div class="top">
      <div class="back" @click="handleBack" v-if="back"><Icon type="ios-arrow-back" />返回</div>
      <div class="title">{{ title }}</div>
      <div class="close" @click="handleClose" v-if="close"><Icon type="md-close" /></div>
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
// import { throttle } from '@/libs/tools.js';
export default {
  // 窗格组件
  name: 'mx-pane',
  props: {
    // 右上角是否显示关闭按钮
    close: {
      type: Boolean,
      default: false
    },
    // 左上角是否显示后退按钮
    back: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: 'title'
    }
  },
  methods: {
    handleBack() {
      this.$emit('on-back')
      this.$router.push({ path: '/blogs' })
    },
    handleClose() {

    },
    // scrollAction(e) {
    //   console.log(e.target.scrollHeight - e.target.scrollTop, e.target.clientHeight)
    //   if((e.target.scrollHeight - e.target.scrollTop) === e.target.clientHeight) {
    //     this.$emit('scroll2bottom')
    //   }
    // },
    // scrollEvent($event) {
    //   console.log('滚动了')
    //   throttle(this.scrollAction($event), 100)
    // }
  },
  created() {
    if(this.$route.name === 'view-blog') {
      this.$emit('on-refresh')
    }
  },
}
</script>

<style lang="less" scoped>
.mx-pane {
  overflow: hidden;
  width: 350px;
  height: 500px;
  // border: 1px solid #ccc;
  border-radius: 15px;
  .top {
    display: flex;
    background-color: #d8dce3;
    height: 37px;
    text-align: center;
    white-space: nowrap;
    font-size: 1.2rem;
    line-height: 37px;
    box-sizing: border-box;
    font-weight: 700;
    .title {
      width: 100%;
    }
    .back, .close {
      width: 70px;
      cursor: pointer;
    }
  }
  .content {
    overflow-y: auto;
    padding: 0 30px;
    height: calc(100% - 37px);
    background-color: #fff;
  }
}
</style>